<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        div{
            width:300px;
            height:300px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            top:0;
            transition: all 1s linear;
        }

        p{
            width:300px;
            height:300px;
            background-color: orange;
            position: absolute;
            left: 500px;
            top:500px;
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <div draggable="true">

    </div>

    <p>

    </p>

    <script>
        // 如果我们想拖拽一个元素 那么需要给这个元素添加一个属性 
        // draggable = "true"

        var divele = document.querySelector('div');
        var pele = document.querySelector('p');

        // divele.ondragstart = function(){
        //     console.log('你要把我拖走了,除非到你心里要不然哪里也不去');
        // }

        // divele.ondrag = function(){
        //     console.log('你正在拖着我移动');
        // }

        // divele.ondragend = function(){
        //     console.log('你放手了,当时的海誓山盟算什么呢');
        // }


        // pele.ondragenter = function(){
        //     console.log('我终于做成了紫霞仙子进到你的心里');
        // }

        // pele.ondragleave = function(){
        //     console.log('要不是彻底失望我才不会选择离开');
        // }

        // pele.ondragover = function(){
        //     // console.log('完全进入了');
        //     // 消除dragover 带来的影响 
        //     return false
        // }


        // pele.ondrop = function(){
        //     console.log('在我这里你放手了 ');
        // }

        // 需求  拖着div走  然后到p身上放手 两个区域交换位置  

        // 如何实现交换位置   两个元素的left top 相互交换 


        // 拖放元素事件  drop    前提还得取消 dragover带来的影响

        pele.ondragover = function(){
            return false;
        }

        pele.ondrop = function(){
            // 获取div元素的原始位置 
            // 获取内联样式的值 
            var left = window.getComputedStyle(divele).left;
            var top = window.getComputedStyle(divele).top;
            
            divele.style.left = window.getComputedStyle(pele).left;
            divele.style.top =window.getComputedStyle(pele).top;

            pele.style.left = left
            pele.style.top = top;
        }

    </script>
</body>
</html>